﻿<template>
	<view>
		<template v-if="hasPower">
			<scroll-view class="scroll" scroll-y="true">
				<view class="title">请选择您的身份</view>
				<view class="sub-title">您好，这里是台光电子，欢迎来访！</view>
				<view class="box" v-for="(item, index) in list" :key="index" @click="goFillIn(item)">
					<view>
						<view class="box-title">{{item.title}}</view>
						<view class="box-sub-title">{{item.subTitle}}</view>
					</view>
					<image class="img" :src="item.path" mode="aspectFit"></image>
				</view>
				<view style="height: 50rpx;"></view>
			</scroll-view>
			<u-row gutter="32" class="foot">
				<u-col span="6">
					<a class="down-site" href="https://scm.emcks.com:55443/images/webAddr/emc_vs_code.png">保存网址图片</a>
				</u-col>
				<u-col span="6">
					<u-button type="primary" @click="copySite">复制网址</u-button>
				</u-col>
			</u-row>
		</template>
		<pages-empty v-else status="power" tips="您拒绝了服务条款无法使用该服务,请返回同意" btnText="返回"></pages-empty>
		<u-modal v-model="show" title="服务条款" show-cancel-button cancel-text="拒绝" confirm-text="同意" @confirm="confirm" @cancel="cancel" z-index="900">
			<view class="slot-content">
				使用前请仔细阅读<span style="color: blue;" @tap="showNotice = true">《入场须知》</span>。当您勾选我已阅读并点击同意后，即表示您已充分理解并同意条款内容，并将对您产生法律约束力。如您拒绝将无法使用该服务。<br>
				<u-checkbox-group style="margin-top: 20rpx;">
					<u-checkbox v-model="checked" label-disabled>我已阅读<span style="color: blue;" @tap="showNotice = true">《入场须知》</span></u-checkbox>
				</u-checkbox-group>
			</view>
		</u-modal>
		<u-modal v-model="showLogin" title="用户登录" show-cancel-button confirm-text="登录" @confirm="confirmLogin">
			<view class="list">
				<view class="list-call">
					<image class="img" src="/static/shilu-login/1.png"></image>
					<u-input class="sl-input" v-model="phone" type="text" maxlength="11" placeholder="输入账号" />
				</view>
				<view class="list-call">
					<image class="img" src="/static/shilu-login/2.png"></image>
					<u-input class="sl-input" v-model="password" type="password" maxlength="32" placeholder="输入密码" password="true" />
				</view>
			</view>
		</u-modal>
		<u-popup v-model="showNotice" mode="center" width="100%" height="100%" closeable>
			<image src="https://scm.emcks.com:55443/upload/ComImg/entry-notice.jpg" mode="aspectFit" style="width: 100%;height: 100%;"></image>
			<u-row gutter="32" class="foot">
				<u-col span="12">
					<u-button type="primary" @click="alRead">确认已读</u-button>
				</u-col>
			</u-row>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRead: false,
				showNotice: false,
				phone: '',
				password: '',
				showLogin: false,
				hasPower: true,
				checked: false,
				show: false,
				list:[
					{
						title: '一般访客',
						subTitle: '供应商、业务商谈、个人面试...',
						path: '../../static/icon_visitor.png',
						page: '/pages/info/visitor'
					},
					{
						title: '货运人员',
						subTitle: '提货、送货、物品运输相关...',
						path: '../../static/icon_driver.png',
						page: '/pages/info/driver'
					},
					{
						title: '施工人员',
						subTitle: '施工申请、现场作业...',
						path: '../../static/icon_build.png',
						page: '/pages/info/visitor'
					},
					{
						title: '特殊人员',
						subTitle: '政府、审计会计、多人面试、食堂工人、长驻、其他...',
						path: '../../static/icon_teshu.png',
						page: '/pages/info/teshu'
					}
				]
			}
		},
		onLoad(options) {
			if(options.accounts){
				uni.redirectTo({
					url: '/pages/wxmsg/applicants?accounts='+options.accounts
				})
			}
			const dns = uni.getStorageSync('power_key')
			if(dns){
				if(dns!=this.getCurDateStr()) {
					this.show = true 
				}
			}else{
				this.show = true
			}
		},
		methods: {
			alRead() {
				this.isRead = true
				this.showNotice = false
			},
			async confirmLogin() {
				this.$u.post('/sysAuth/login',{
					account: this.phone,
					code: "",
					codeId: "19496463353285",
					password: this.password,
				}).then(res => {
					if(res.code==200){
						uni.setStorageSync("accessToken", res.result.accessToken);
						this.$u.toast('登录成功')
						uni.navigateTo({
							url: '/pages/info/teshu'
						})
					}else{
						this.$u.toast(res.message)
					}	
				}).catch(err => {
					this.$u.toast(err)
				})
			},
			getCurDateStr() {
				let now = new Date()
				return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
			},
			confirm() {
				if(this.checked && this.isRead) {
					uni.setStorageSync('power_key', this.getCurDateStr())
					this.hasPower = true
				}else {
					this.show = true
					this.$u.toast('请阅读后勾选，以免罚款')
				}
			},
			cancel() {
				this.hasPower = false
			},
			goNotice() {
				uni.previewImage({
					urls: ['https://scm.emcks.com:55443/upload/ComImg/entry-notice.jpg']
				});
			},
			copySite() {
			  uni.setClipboardData({
			  	data: 'https://scm.emcks.com:55081',
			  	success: function () {
			  		uni.showModal({
			  			title: '复制成功',
			  			content: '已复制到粘贴板，请在当前应用粘贴保存好以便下次使用。', 
			  			showCancel:false,
			  			success: function(res) {
			  				if (res.confirm) {											 
			  					//console.log('用户点击确定');
			  				} else if (res.cancel) {
			  					//console.log('用户点击取消');
			  				}
			  			}
			  		});
			  	}
			  });
			},
			goFillIn(item) {
				if(item.title=='特殊人员') {
					const accessToken = uni.getStorageSync('accessToken')
					if(!accessToken){
						this.showLogin = true
					}else{
						uni.navigateTo({
							url: '/pages/info/teshu'
						})
					}
				}else{
					uni.navigateTo({
						url: item.page
					})
				}
			}
		}
	}
</script>

<style scoped>
	.scroll {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 102rpx);
		width: 100%;
	}
	
	.title {
		font-size: 54rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 90rpx;
		padding-left: 40rpx;
	}

	.sub-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #636363;
		padding: 30rpx 0 50rpx 40rpx;
	}
	
	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: auto;
		margin-top: 34rpx;
		padding: 0 50rpx;
	}
	
	.box-title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	
	.box-sub-title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8C8C8C;
		margin-top: 28rpx;
	}
	
	.img {
		width: 130rpx;
		height: 130rpx;
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		border-top: 1rpx solid #F5F5F5;
		background: #fff;
	}
	
	.down-site {
		font-size: 15px;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		border-color: #2979ff;
		background-color: #2979ff;
		position: relative;
		border: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0 20rpx;
		z-index: 1;
		box-sizing: border-box;
		transition: all 0.15s;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-appearance: none;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		text-decoration: none;
		border-radius: 10rpx;
		-webkit-tap-highlight-color: transparent;
		overflow: visible;
	}
	
	.slot-content {
		padding: 30rpx;
		font-size: 15px;
	}
	
	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}
	
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}
	
	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}
</style>
